<template>
	<view class="par2">
		<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :defaultColor='defaultColor'
		 :activeColor="activeColor" :acsize="acsize">
		</zzx-tabs>
		
		<view class="app-money">
			<view class="money-left">
				<view class="stats-text"><text class="linepice"></text><text>设置参考价</text>
				</view>
			</view>
			<view class="money-right">
				<text>{{city || '长沙市'}}{{district || '岳麓区'}}</text>
				<!-- <image src='/static/img/top_icon.png' class="right-img"></image> -->
			</view>
		</view>
		<view class="par2-wrappper">
			<view class="par2-item" v-for="(item,index) in parterList" :key="index">
				<view class="par2-title">{{item.name}}</view>
				<view class="par2-input-body">
					<input class="par2-input" type="text" v-model="item.setprice" :placeholder="item.price>0?item.price:'请输入参考价'"/>
					<view class="par2-right">元/公斤</view>
				</view>
			</view>
			
		</view>
		
		<view class="par-but" @click="confirm()">确定</view>
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	export default {
		data() {
			return {
				items: [],
				current: 0,
				defaultColor: '#000000',
				activeColor: '#3E9AFC',
				acsize:'14px',
				cateId:'',
				parterList:[],
				city:'',
				district:'',
				areaid:''
			}
		},
		onLoad(){
			this.getGarbagecate()
		},
		onReady: function() {
			console.log('onReady')
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					if (!(uni.getStorageSync('longitude') == res.longitude && uni.getStorageSync('latitude') == res.latitude)) {
						that.getgeocoder(res.longitude, res.latitude)
					} else {
						that.city = uni.getStorageSync('city')
						that.district = uni.getStorageSync('district')
					}
					uni.setStorageSync('longitude', res.longitude)
					uni.setStorageSync('latitude', res.latitude)
				},
			})
		},
		methods: {
			//经纬度获取区域信息
			getgeocoder(longitude, latitude) {
				let params = {
					lat: latitude,
					lng: longitude
				}
				this.$http.geocoder(params).then(res => {
					this.city = res.data.city
					this.district = res.data.district
					this.areaid = res.data.adcode
					uni.setStorageSync('city', this.city)
					uni.setStorageSync('district', this.district)
					uni.setStorageSync('adcode', this.areaid)
				})
			},
			//获取合伙人参数
			getPartner(){
				this.$http.get_partner({cate:this.cateId}).then(res => {
					uni.hideLoading()
					this.parterList = res.data
				})
			},
			//分类类别
			getGarbagecate() {
				this.items = []
				this.$http.garbagecate().then(res => {
					if (res.data && res.data.length > 0) {
						this.garbagecateList = res.data
						res.data.forEach((val, key) => {
							this.items.push(val.name)
						})
						this.cateId = res.data[0].id
						this.getPartner();
					}
				})
			},
			confirm() {
				let data = []
				this.parterList.forEach((val) => {
					data.push({
						id:val.id,
						price:val.setprice?val.setprice:val.price
					})
				})
				let formData = {
					data:JSON.stringify(data),
				}
				uni.showLoading({})
				this.$http.set_partner(formData).then(res => {
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 0){
						setTimeout(() => {
							this.getPartner()
						},1000)
					}
				})
			},
			
			//切换回收类型
			onClickItem(e) {
				//切换回收类型清空数据
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.garbagecateList.forEach((val, key) => {
						if (key == e.currentIndex) {
							this.cateId = val.id
							setTimeout(() => {
								uni.showLoading({})
								this.getPartner();
							}, 50)
						}
					})
				}
			},
		}
	}
</script>


<style scoped>
	.linepice{
		width: 24upx;height: 8upx;background: #2B2A29;border-radius: 8upx;display: block;margin-right: 5px;
	}
	.par2{
		width: 100%;
		padding-bottom: 80px;
	}
.par2>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
		background-color: #3E9AFC;
	}
	.app-money {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
	}
	
	.money-right {
		/* display: flex;
		flex-direction: row; */
	}
	
	.right-img {
		width: 27px;
		height: 27px;
		vertical-align: middle;
	}
	.stats-text {
		font-size: 17px;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.st-line {
		width: 160upx;
		height: 6upx;
		background: rgb(233, 241, 255);
		margin-left: 20upx;
	}
	.par2-wrappper{
		display: flex;
		flex-direction: column;
		padding: 0 16px;
	}
	.par2-title{
		color: rgba(52, 54, 51, 1);
		font-size: 13px;
		font-weight: bold;
		padding: 0 10px;
		margin-top: 5px;
	}
	.par2-input-body{
		position: relative;
	}
	.par2-input{
		background-color: rgba(187, 187, 187, 0.1);
		padding: 14px 60px 14px 20px;
		border-radius: 5px;
		margin: 10px 0;
	}
	.uni-input-placeholder{
	font-size: 12px;	
	}
	.par2-right{
		position: absolute;
		right: 10px;
		top:15px;
		color: #FF3D29;
		font-size: 13px;
		font-weight: bold;
	}
	.par-but{
		height:96upx;
	
	background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
	
box-shadow: 0px 2px 4px 0px #1E75FF;
		border-radius:48upx;
		line-height: 96upx;
		text-align: center;
		font-size: 16px;
		color: #FFFFFF;
		margin: 50px auto 0 auto;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 9;
	}
</style>
